<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/poser.css">
    <script src="js/jquery-2.2.4.min.js"></script>
    <script src="js/rem2.js"></script>
    <script src="js/html2canvas.js"></script>
    <script src="js/canvas2Image.js"></script>
    <title>九嶷山云祭祀平台</title>
</head>
<body>
	<div class="save-wrapper">
		<div class="bg-img">
			<img id="bgImg" src="../poser/poser_1.png" alt="">
		</div>
		<div class="content-wrapper poser-one">
			<p>我是第<span class="num"></span>个为抗疫英烈<span id="typeName">点灯</span>的人</p>
			<p>邀请TA共同纪念英烈</p>
			<div class="code">
				<img src="../poser/code.png" alt="">
			</div>
		</div>
		<div class="content-wrapper poser-two">
			<!-- <p>我已向始祖舜帝敬献<span class="num"></span>个祭祀用品</p> -->
			<p>已有<span class="num"></span>个人向始祖舜帝祭拜</p>
			<p>虔诚祈福 共盼福寿安康</p>
			<div class="code">
				<img src="../poser/code.png" alt="">
			</div>
		</div>
		<div class="other-wrapper">
			<span class="tips">(长按保存海报)</span>
			<div class="back-btn">
				<img src="../activityOne/btn_2.png" alt="">
			</div>
		</div>
	</div>
	<script>
		$(function(){
			var PATHAPI = "http://a.yuncjs.cn";
			// 海报类型切换图片及内容
			var type = GetQueryString("type") || 1;
			type = type / 1;
			var action = GetQueryString("action") || '';
			if(type == 4){
				$.ajax({
				       //请求方式
				       type : "GET",
						headers: {
								Token: localStorage.getItem('token')
						},
				       //请求的媒体类型
				       contentType: "application/json;charset=UTF-8",
				       //请求地址
				       url : PATHAPI + "/feteRank?action="+action,
				       //请求成功
				       success : function(result) {
				           if(result.status != "success"){
											//alert("请求出错");
				           }
				       },
				       //请求失败，包含具体的错误信息
				       error : function(e){
				           console.log(e.status);
				           console.log(e.responseText);
				       }
				   });
			}else{
				$.ajax({
				       //请求方式
				       type : "GET",
					   headers: {
								Token: localStorage.getItem('token')
						},
				       //请求的媒体类型
				       contentType: "application/json;charset=UTF-8",
				       //请求地址
				       url : PATHAPI + "/activityRank?action="+action,
				       //请求成功
				       success : function(result) {
				           if(result.status != "success"){
											//alert("请求出错");
				           }
				       },
				       //请求失败，包含具体的错误信息
				       error : function(e){
				           console.log(e.status);
				           console.log(e.responseText);
				       }
				   });
			}
			 
			// 动态切换背景图
			var $content = $(".content-wrapper");
			var $poserOne = $(".poser-one");
			var $poserTwo = $(".poser-two");
			var $other = $(".other-wrapper");
			
			var num = GetQueryString("num") || 1;
			$(".num").html(num);
			var typeName = "敬礼";
			switch(type) {
				case 1:
					typeName = "敬礼";
					$poserOne.show();
					break;
				case 2:
					typeName = "点灯";
					$poserOne.show();
					break;
				case 3:
					typeName = "献花";
					$content.css("top","36%")
					$(".tips").css("color","rgba(255,255,255,0.8)");
					$poserOne.show();
					break;
				case 4:
					$other.addClass("poser-two");
					$poserTwo.show();
					break;
			}
			$("#bgImg").attr("src", "../poser/poser_"+ type +".png").show(); 
			$("#typeName").html( typeName );
			
			// 设置定时器，延迟生成图片
			var timeIndex = 0;
			$(document).ready(function(){
				clearTimeout(timeIndex);
				timeIndex = setTimeout(function(){
					saveImg();
				},1000)
			});
			// 返回选择页面
			$(".back-btn").on("click",function() {
				window.open(window.location.protocol + "//" + window.location.host + "/#/pages/home/homeNav");
			});
			// 生成合并的图片
			function saveImg() {
				$(".other-wrapper").hide();
				var cntElem = $('.save-wrapper')[0];   // 需要转为图片的容器
				var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
				var width = shareContent.offsetWidth; //获取dom 宽度
				var height = shareContent.offsetHeight; //获取dom 高度
				var canvas = document.createElement("canvas"); //创建一个canvas节点
				var scale = 2; //定义任意放大倍数 支持小数
				canvas.width = width * scale; //定义canvas 宽度 * 缩放
				canvas.height = height * scale; //定义canvas高度 *缩放
				canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
				var opts = {
					scale: scale, // 添加的scale 参数
					canvas: canvas, //自定义 canvas
					// logging: true, //日志开关，便于查看html2canvas的内部执行流程
					width: width, //dom 原始宽度
					height: height,
					useCORS: true // 【重要】开启跨域配置
				};
				html2canvas(shareContent, opts).then(function (canvas) {
					var context = canvas.getContext('2d');
					// 【重要】关闭抗锯齿
					context.mozImageSmoothingEnabled = false;
					context.webkitImageSmoothingEnabled = false;
					context.msImageSmoothingEnabled = false;
					context.imageSmoothingEnabled = false;
					// 【重要】默认转化的格式为png,也可设置为其他格式
					var img = Canvas2Image.saveAsPNG(canvas, canvas.width, canvas.height);
					document.body.appendChild(img);
					$(".other-wrapper").show();
					$(img).css({
						"width": canvas.width / 2 + "px",
						"height": canvas.height / 2 + "px",
						"position":"absolute",
						"top":"0",
						"left":"0",
						"opacity":"1",
						"z-index":222
					}).addClass('f-full').on("click",function(){
						// $(this).remove();   // 不移除
					});
				});
			}
			// 获取url的参数
			function GetQueryString(name) {
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null)return  unescape(r[2]); return null;
			}
		});
	</script>
</body>

</html>